<template>
  <div>
    <el-container>
      <!--      <el-header>-->
      <!--        <el-card class="cardHead">-->
      <!--          <span class="headText">教学班报名</span>-->
      <!--        </el-card>-->
      <!--      </el-header>-->
      <el-main>
        <el-card class="card">
          <el-table :data="tableData" style="width: 100%" class="table" size="small" stripe border>
            <el-table-column v-if="false" prop="cid" label="班级ID" width="180">
              <template slot-scope="scope">
                {{ scope.row.cid ? scope.row.cid :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="className" label="班级名称"  width="150">
              <template slot-scope="scope">
                {{ scope.row.className ? scope.row.className :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="classWeekday" label="上课时间"  align="center">
              <template slot-scope="scope">
                {{ scope.row.classWeekday&&scope.row.classStartNum&&scope.row.classEndNum?'周'+scope.row.classWeekday+' '+'（第'+scope.row.classStartNum+'节至第'+scope.row.classEndNum+'节）':'暂无数据' }}
              </template>
            </el-table-column>
            <el-table-column prop="classState" label="报名状态"  align="center">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.classState ===0 ? 'info' : scope.row.classState=== 1 ? '':scope.row.classState === 2 ?'danger':''"
                >
                  {{ scope.row.classState===0 ? '未开启报名' :scope.row.classState===1 ?'报名进行':scope.row.classState===2 ?'报名截止':'暂无' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="limitOfNumber" label="已报名/限制数"   align="center">
              <template slot-scope="scope">
                {{ scope.row.limitOfNumber ? scope.row.currentNumber?scope.row.currentNumber+'/'+scope.row.limitOfNumber:'0/'+scope.row.limitOfNumber :'暂无数据' }}
              </template>
            </el-table-column>
            <el-table-column prop="openingWeek" label="开班星期"   align="center"/>
            <el-table-column fixed="right" label="课程信息"   align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="getCourse(scope.row.cid),dialogTableVisible = true">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作"  align="center">
              <template slot-scope="scope">
                <!--                <el-button type="primary" @click="getCourse(scope.row.cid),dialogTableVisible = true">课程信息</el-button>-->
                <el-button slot="reference" size="small" type="primary" @click="chooseCourseForSignUp(scope.row),signUpDialogFormVisible = true">报名</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.pageNum"
            :total="page.totalSize"
            @current-change="handleCurrentChange"
            layout="total,prev, pager, next, jumper"
            style="margin-top: 10px;float: right;margin-bottom: 10px"
          />
        </el-card>
        <el-dialog title="课程信息" :visible.sync="dialogTableVisible" width="60%">
          <el-table :data="courseList">
            <el-table-column property="name" label="课程名" width="100" />
            <el-table-column property="introduce" label="课程介绍" width="100" show-overflow-tooltip="true" />
            <el-table-column property="childrenRequest" label="幼儿要求" width="150" />
            <el-table-column property="defaultCost" label="默认费用" />
            <el-table-column property="materialCost" label="材料费用" />
            <el-table-column property="costIntroduce" label="费用介绍"  show-overflow-tooltip="true"/>
          </el-table>
        </el-dialog>
        <el-dialog title="教学班报名" :visible.sync="signUpDialogFormVisible">
          <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="材料费用选择" prop="checkPass">
              <template>
                <el-table :data="courseList">
                  <el-table-column property="name" label="课程名" width="100" />
                  <el-table-column property="costIntroduce" label="材料费用" width="100">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="chooseMaterialCost[scope.$index]"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column property="costIntroduce" label="晚餐费用">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="chooseDinnerCost[scope.$index]"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="SignUp">确认报名</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import { getClass } from '../../../api/class'
import { getCourses } from '../../../api/course'
import { signUp } from '../../../api/order'
import { getTeacherInfo } from '../../../api/teacher'

export default {
  name: 'SignUp',
  data() {
    return {
      courseId: '',
      // dinnerCostChoose: false,
      // disabledList: [],//
      chooseMaterialCost: [],
      chooseDinnerCost: [],
      signUpDialogFormVisible: false,
      ruleForm: {},
      rules: {},
      dialogTableVisible: false,
      visible: false,
      tableData: [],
      list: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      teacher_Name: '',
      courseList: [],
      courses: [],
      // multipleSelection: [],
      flag: true,
      ClassID: ''
    }
  },
  created() {
    this.getAllClass()
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getAllClass()
    },
    getAllClass() {
      getClass({
        classState: 1,
        classType: 1,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then(async res => {
        this.list = res.data.list
        // 根据班级id获取该班班主任
        // for (var i = 0; i < this.list.length; i++) {
        //   var id = this.list[i].headTeacherId
        //   await getTeacherInfo(id)
        //     .then(res => {
        //       this.teacher_Name = res.data.teacherName
        //       this.list[i].teacherName = this.teacher_Name
        //       this.$message.success('请求班主任成功！')
        //     }).catch(err => {
        //       this.$message.error('请求班主任失败！')
        //     })
        // }
        this.tableData = this.list
        this.page = res.data.page
        // this.$message.success('请求班级列表成功')
      })
        // .catch(err => {
        //   this.$message.error('请求班级列表失败！')
        // })
    },
    getCourse(cid) {
      console.log(cid)
      getCourses(cid
      )
        .then(res => {
          this.courseList = res.data
          // this.$message.success('获取课程列表成功！')
        })
        // .catch(err => {
        //   this.$message.error('获取课程列表失败！')
        // })
    },
    chooseCourseForSignUp(row) {
      getCourses(
        row.cid
      )
        .then(res => {
          this.courseList = res.data
          console.log(res.data[0].cid)
          this.courseId = res.data[0].cid
          console.log('!!!!!!!!!!!-----------课程id' + this.courseId)
          this.ClassID = row.cid
          this.chooseMaterialCost[0] = false
          this.chooseDinnerCost[0] = false
          // this.$message.success('获取课程列表成功！')
        })
        // .catch(err => {
        //   this.$message.error('获取课程列表失败！')
        // })
    },
    // 处理选中的课程
    // handleSelectionChange(val) {
    //   this.multipleSelection = val
    //   if (this.multipleSelection.length === 0) { // 课程都未选中
    //     for (let i = 0; i < this.courseList.length; i++) {
    //       this.disabledList[i] = true
    //       this.chooseMaterialCost[i] = false
    //     }
    //   } else {
    //     for (let i = 0; i < this.courseList.length; i++) {
    //       for (let j = 0; j < this.multipleSelection.length; j++) {
    //         this.flag = true
    //         if (this.courseList[i].cid === this.multipleSelection[j].cid) {
    //           this.disabledList[i] = false // 选中的课程switch解除禁用
    //           this.flag = false
    //           console.log(this.flag)
    //           break
    //         }
    //       }
    //       if (this.flag === true) { // 未选中的课 程Switch开启禁用,并关闭
    //         this.chooseMaterialCost[i] = false
    //         this.disabledList[i] = true
    //       }
    //     }
    //   }
    // },
    SignUp() {
      this.courses = []
      var choose = this.chooseMaterialCost[0]
      var chooseDinner = this.chooseDinnerCost[0]
      this.courses.push({ courseId: this.courseId, choose: choose })

      signUp({
        classId: this.ClassID,
        courses: this.courses,
        dinner: chooseDinner
      }).then(res => {
        this.signUpDialogFormVisible = false
        this.$message.success('报名班级成功！')
        this.getAllClass()
      })
        // .catch(err => {
        //   this.$message.error('报名班级失败！')
        // })
    },
    resetForm() {
      // this.dinnerCostChoose = false
      this.signUpDialogFormVisible = false
    }
  }
}
</script>

<style scoped>
  .card{
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
  }
  .headText{
    font-size: 20px;
    font-weight: bold;
  }
  .cardHead{
    margin-left: -20px;
    margin-right: -20px;
  }

</style>

<style lang="css">

  .el-tooltip__popper{font-size: 14px; max-width:50% } /*设置显示隐藏部分内容，按50%显示*/

</style>
